<% use crate::utils::urls; %>
<turbo-frame id="snapshot">
  <div class="notebook">
    <section>
      <h1><span class="material-symbols-outlined">storage</span><%= snapshot.relation_name %>   
        <% if &snapshot.status == "created" { %>
          <span class="material-symbols-outlined success">done</span>
        <% } else { %>
          <span class="material-symbols-outlined">sync</span>
        <% } %>
      </h1>
    
      <dl>
        <dt>Snapshot ID</dt>
        <dd><%= snapshot.id %></dd>
        <dt>Table Size</dt>
        <dd><%= snapshot.table_size %></dd>
        <dt>Rows</dt>
        <dd><%= snapshot.rows().unwrap() %></dd>
        <dt>Features</dt>
        <dd><%= snapshot.feature_size().unwrap() %></dd>
        <dt>Created</dt>
        <dd><time datetime="<% snapshot.created_at; %>"><% snapshot.created_at; %></time></dd>
      </dl>
    
    <% if !models.is_empty() { %>
      <h2><span class="material-symbols-outlined">model_training</span>Models</h2>
      <% let project = &projects[&models.iter().next().unwrap().project_id]; %>
      <ol class="object_list model_list">
        <li>
          <a href="<%- urls::deployment_project_by_id(project.id) %>" data-turbo-frame="_top">
            <h3 style="padding-right: 20%"><%= project.name %></h3>
            <b><%- project.key_metric_display_name().unwrap() %></b>
            <figure id="project_<%= project.id %>"></figure>
          </a>
      </li>
        <% for model in models.iter() { %>
        <li>
          <a href="<%- urls::deployment_model_by_id(model.id) %>" data-turbo-frame="_top">
            <span class="material-symbols-outlined d-flex justify-content-center align-items-center">
              <% if model.search.is_some() { %>
                <% if model.search.as_ref().unwrap().as_str() == "grid" { %>
                grid_on
                <% } %>
                <% if model.search.as_ref().unwrap() == "random" { %>
                shuffle
                <% } %>
              <% } else { %>
                check_circle
              <% } %>
            </span>
            <span class="ps-2"><%= model.algorithm %></span>
            <span><%= format!("{:.4}", model.key_metric(&project).unwrap_or(0.)) %></span>
            <figure id="model_<%= model.id %>"></figure>
          </a>
        </li>
        <% } %>
      </ol>
    <% } %>
    
    <% if snapshot.exists { %>
      <h2><span class="material-symbols-outlined">label_important</span>Labels</h2>
      <% for label in snapshot.labels().unwrap().iter() {
        let name = label["name"].as_str().unwrap();
        let name_machine = name.replace(" ", "_");
      %>
        <h3><%= name %>&nbsp;<code><%= label["pg_type"].as_str().unwrap() | upper %></code></h3>
        <figure id="<%= name_machine %>_distribution"></figure>
        <figure id="<%= name_machine %>_outliers"></figure>
      <% } %>
      <h2><span class="material-symbols-outlined">bubble_chart</span>Features</h2>
      <% for feature in snapshot.features().unwrap().iter() {
        let name = feature["name"].as_str().unwrap();
        let name_machine = name.replace(" ", "_");
      %>
        <h3><%= name %>&nbsp;<code><%= feature["pg_type"].as_str().unwrap() | upper %></code></h3>
        <figure id="<%= name_machine %>_distribution"></figure>
        <% if snapshot.y_column_name.as_ref().is_some() { %>
        <% for y_column_name in snapshot.y_column_name.as_ref().unwrap().iter() { %>
        <figure id="<%= name_machine %>_correlation_<%= y_column_name %>"></figure>
        <% } %>
        <% } %>
      <% } %>
    </section>
  </div>
    
  <script defer type="module">
    import { renderModel, renderDistribution, renderCorrelation, renderOutliers } from '@postgresml/main';
  
    function renderCharts() {
    <% for feature in snapshot.features().unwrap().iter() {
      let name = feature["name"].as_str().unwrap();
      let name_machine = name.replace(" ", "_");
    %>
      var <%= name_machine %>_samples = <%= serde_json::to_string(&samples[name]).unwrap() %>;
    <% } %>
    <% for label in snapshot.labels().unwrap().iter() {
      let name = label["name"].as_str().unwrap();
      let name_machine = name.replace(" ", "_");
    %>
      var <%= name_machine %>_samples = <%= serde_json::to_string(&samples[name]).unwrap() %>;
    <% } %>
   
    <% for model in models.iter() {
      let project = &projects[&model.project_id];
    %>
      renderModel(<%= model.id %>, <%= model.key_metric(project).unwrap() %>, [0, 1]);
    <% } %>
  
    <% if snapshot.y_column_name.as_ref().is_some() { %>
    <% for y_column_name in snapshot.y_column_name.as_ref().unwrap().iter() { %>
      setTimeout(renderDistribution, delay, "<%= y_column_name %>", <%= y_column_name %>_samples, NaN);
      setTimeout(renderOutliers, delay, "<%= y_column_name %>", <%= y_column_name %>_samples, <%= snapshot.target_stddev(y_column_name) %>)
    <% } %>
    <% } %>

      var delay = 600;
  
    <% for feature in snapshot.features().unwrap().iter() {
      let name = feature["name"].as_str().unwrap();
      let name_machine = name.replace(" ", "_");
    %>
      delay += 200;
    
      setTimeout(renderDistribution, delay, "<%= name_machine %>", <%= name_machine %>_samples, NaN);
      <% if snapshot.y_column_name.as_ref().is_some() { %>
      <% for y_column_name in snapshot.y_column_name.as_ref().unwrap().iter() { %>
      setTimeout(renderCorrelation, delay, "<%= name_machine %>", "<%= y_column_name %>", <%= name_machine %>_samples, <%= y_column_name %>_samples);
      <% } %>
      <% } %>
    <% } %>
    }
    renderCharts();
  </script>
  <%} else { %>
    <section>
      <p style="color: gray"> <center> Data no longer exists to plot statistics </center></p>
    </section>
  <% }%>
</turbo-frame>
